<template>
  <div class="dashboard">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card title="数据源" :bordered="false">
          <a-statistic
            title="总数"
            :value="5"
            suffix="个"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="模型配置" :bordered="false">
          <a-statistic
            title="总数"
            :value="12"
            suffix="个"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="定时任务" :bordered="false">
          <a-statistic
            title="运行中"
            :value="3"
            suffix="个"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="在线用户" :bordered="false">
          <a-statistic
            title="当前"
            :value="1"
            suffix="人"
          />
        </a-card>
      </a-col>
    </a-row>

    <a-card title="快速入口" style="margin-top: 16px">
      <a-space :size="16">
        <a-button type="primary" @click="goTo('/config/datasource')">
          数据源管理
        </a-button>
        <a-button type="primary" @click="goTo('/config/model')">
          模型配置
        </a-button>
        <a-button type="primary" @click="goTo('/task/schedule')">
          定时任务
        </a-button>
      </a-space>
    </a-card>

    <a-card title="系统信息" style="margin-top: 16px">
      <a-descriptions :column="2">
        <a-descriptions-item label="系统名称">
          Ainet 管理后台
        </a-descriptions-item>
        <a-descriptions-item label="系统版本">
          v0.0.1
        </a-descriptions-item>
        <a-descriptions-item label="当前用户">
          {{ userStore.username }}
        </a-descriptions-item>
        <a-descriptions-item label="登录时间">
          {{ new Date().toLocaleString() }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';

const router = useRouter();
const userStore = useUserStore();

const goTo = (path: string) => {
  router.push(path);
};
</script>

<style scoped lang="less">
.dashboard {
  :deep(.ant-card) {
    .ant-card-head {
      border-bottom: 1px solid #f0f0f0;
    }
  }
}
</style>
